<template>
  <div>
    <a-carousel class="course_wrap" :autoplay="true" :after-change="onChange">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
    </a-carousel>
    <!-- 表格组件 -->
    <!-- columns 表头的数据
      data-source 表格数据
     -->
    <a-table @change="pageChange" :columns="col" :data-source="datas"  :pagination="pageObj">
      <!-- 表头部分的插槽自定义 -->
      <!-- column 当前表头的数据 -->
    <template #headerCell="{column}">
              <!-- 自定义了 姓名的表头 -->
            <template v-if="column.key=='name'">
                <SmileOutlined />
                姓名
          </template>
          <template v-if="column.key=='action'">
                <SmileOutlined />
                操作
          </template>
    </template>
      <!-- 表格部分的插槽自定义 -->
      <!--column 列头的数据
        record 当前行数据
      -->
      <template #bodyCell="{column,record}">
        <!-- 标签部分 -->
          <template v-if="column.key=='tags'">
                <a-tag color="blue" v-for="(item,index) in record.tags" :key="index" >{{item}}</a-tag>
          </template>
          <!-- 操作 -->
          <template v-if="column.key=='action'">
             <a-button type="primary">编辑</a-button>
              <a-button>删除</a-button>
          </template>
      </template>

      </a-table>
        <a-pagination v-model:current="current" @change="getChange" :total="50" show-less-items />

  </div>
</template>
<script>
import { SmileOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  components: {
    SmileOutlined
  },
  setup () {
    // 表头的数据
    const columns = [
      {
        title: '姓名',
        name: 'Name',
        dataIndex: 'name', // 结合数据
        key: 'name'// 表头的标识
      },
      {
        title: 'Age', // title 自动渲染成表头
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: 'Address',
        dataIndex: 'address'
        // key: 'address'
      },
      {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags'
      },
      {
        title: '操作',
        key: 'action',
        dataIndex: 'action'
      }
    ]
    // 表格的数据
    const data = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer']
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser']
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher']
      }
    ]

    const onChange = (number) => {
      // console.log(number)
    }
    const col = ref(columns)
    const datas = ref(data)
    const current = ref(0)// 当前页码
    // 分页的配置
    const pageObj = ref({
      position: ['bottomCenter', 'topCenter'],
      // current: 1, // 切换的页码
      defaultCurrent: 1, // 默认当前页码
      defaultPageSize: 1, // 默认每页的数据条数
      total: 3,
      change: (page, pageSize) => {
        console.log(page, pageSize)
      }
    })
    const getChange = (num) => {
      console.log(num)
      // console.log(1233)
    }
    const pageChange = (page, sort, s) => {
      console.log(page, sort, s)
    }
    return {
      pageChange,
      onChange,
      col,
      datas,
      current,
      pageObj,
      getChange
    }
  }
})
</script>
<style lang="less">
  // .ant-carousel :deep(.slick-slide) {
  //   text-align: center;
  //   height: 160px;
  //   line-height: 160px;
  //   background: #364d79;
  //   overflow: hidden;
  // }

  // .ant-carousel :deep(.slick-slide h3) {
  //   color: #fff;
  // }
  .course_wrap{
    height: 300px;
    background: skyblue;
  }
  .slick-slide{
    height: 300px;
  }
</style>
